<template>
    <div class="container">
        <ul class="footer">
          <li><span class="iconfont icon-gongneng_zaihangfeiji"></span><span class="text-dec">机票</span></li>
          <li><span class="iconfont icon-guojijiudian yuan"></span><span class="text-dec">酒店</span></li>
          <li><span class="iconfont icon-kezhangongyu yuan"></span><span class="text-dec">公寓</span></li><li>|</li>
          <li class="text-more"><span class="iconfont icon-shuangjiantouxia"></span><span >更多</span></li>
        </ul>
      <ul class="footer-b">
        <li>登陆</li><li>我的订单</li><li>最近浏览</li><li>关于我们</li>
      </ul>
      <div class="hr"></div>
      <ul class="bottom">
        <li>触屏版</li><li>手机版</li>
      </ul>
      <p class="list-bot">Qunar京ICP备05021087意见反馈</p>
    </div>
</template>

<script>
    export default {
        name: "Footer"
    }
</script>

<style scoped lang="stylus">
    .container{
      width :100%;
      background :#f3f3f3;
      .footer{
        display :flex;
        justify-content :space-evenly;
        height :.42rem;
        line-height :.42rem;
        .text-dec{
          font-size :.12rem;
          border-bottom :1px solid #6f6f6f;
        }
        .yuan{
          border:1px solid #6f6f6f;
          border-radius :50%;
        }
      }
      .footer-b{
        width :80%;
        height :.35rem;
        line-height :.28rem;
        display :flex;
        justify-content :space-evenly;
        color :#25a4bb;
      }
      .hr{
        width :100%;
        height :1px ;
        background :#cacaca;
      }
      .bottom{
        width :100%;
        display :flex;
        justify-content :space-evenly;
        line-height :.3rem;
        li:nth-of-type(2){
          color :#25a4bb;
        }
      }
      .list-bot{
        width:100%;
        line-height :.3rem;
        color :#b6b6b6;
        text-align :center;
      }
    }
</style>
